<template>
  <div class="verify-code-login-container">
    <div class="verify-code-login-box">
      <div class="login-header">
        <h2 class="verify-code-login-title">验证码登录</h2>
      </div>
      <van-cell-group class="cell-group">
        <van-field
          label="手机号"
          v-model="loginForm.phone"
          type="tel"
          placeholder="请输入手机号"
          :rules="phoneRules"
          class="login-field verify-code-login-field"
          @blur="validateField('phone')"
        />
        <van-field
          label="验证码"
          v-model="loginForm.code"
          type="text"
          placeholder="请输入验证码"
          :rules="codeRules"
          class="login-field verify-code-login-field"
          @blur="validateField('code')"
        >
          <template #button>
            <van-button
              class="forgot-password-btn send-code-btn"
              @click="sendVerifyCode"
              :disabled="isSending || !loginForm.phone"
            >
              {{ isSending ? count + 's后重发' : '发送验证码' }}
            </van-button>
          </template>
        </van-field>
        <div class="error-message" v-if="formErrors.phone">{{ formErrors.phone }}</div>
        <div class="error-message" v-if="formErrors.code">{{ formErrors.code }}</div>
        <van-button @click="onSubmit" type="primary" size="normal" block class="login-button submit-button" :loading="isLoading">
          {{ isLoading ? '登录中...' : '登录' }}
        </van-button>
      </van-cell-group>
      <div class="other-login-options">
        <van-button @click="goToPasswordLogin" class="other-login-btn">
          密码登录
        </van-button>
        <van-button @click="onThirdLogin" class="other-login-btn">
          第三方登录
        </van-button>
      </div>
      <div class="goto">
        <van-button plain @click="onRegister" class="register-link">
          若还没有账号？点击前往注册
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { setTokenLocal, setUserLocal } from "@/utils/auth.js";

export default {
  data() {
    return {
      loginForm: {
        phone: "",
        code: ""
      },
      isSending: false,
      count: 60,
      phoneRules: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的11位手机号', trigger: 'blur' }
      ],
      codeRules: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{6}$/, message: '请输入6位数字验证码', trigger: 'blur' }
      ],
      formErrors: {
        phone: '',
        code: ''
      },
      isLoading: false,
      mockUserList: {
        '15158672571': {
          id: 1001,
          name: '测试用户',
          avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
          token: 'mock_token_1001'
        },
        '13900139000': {
          id: 1002,
          name: '演示用户',
          avatar: 'https://picsum.photos/200/200?random=2',
          token: 'mock_token_1002'
        }
      }
    };
  },
  methods: {
    validateField(field) {
      const rules = field === 'phone' ? this.phoneRules : this.codeRules;
      let error = '';
      
      rules.forEach(rule => {
        if (rule.required && !this.loginForm[field]) {
          error = rule.message;
        } else if (rule.pattern && this.loginForm[field] && !rule.pattern.test(this.loginForm[field])) {
          error = rule.message;
        }
      });
      
      this.formErrors[field] = error;
      return !error;
    },
    sendVerifyCode() {
      if (!this.validateField('phone')) return;
      
      this.isSending = true;
      this.count = 60;
      
      setTimeout(() => {
        showToast(`验证码已发送至 ${this.loginForm.phone}`);
        const timer = setInterval(() => {
          if (this.count <= 1) {
            clearInterval(timer);
            this.count = 60;
            this.isSending = false;
          } else {
            this.count--;
          }
        }, 1000);
      }, 500);
    },
    onSubmit() {
      this.isLoading = true;
      const phoneValid = this.validateField('phone');
      const codeValid = this.validateField('code');
      
      if (!phoneValid || !codeValid) {
        showToast('请检查输入信息');
        this.isLoading = false;
        return;
      }
      
      if (!this.loginForm.code.startsWith('123')) {
        showToast('验证码错误，请重新输入');
        this.isLoading = false;
        return;
      }
      
      const user = this.mockUserList[this.loginForm.phone];
      if (!user) {
        showToast('该手机号未注册');
        this.isLoading = false;
        return;
      }
      
      setTokenLocal(user.token);
      setUserLocal(user);
      showToast(`欢迎回来，${user.name}`);
      this.$router.push({ name: 'user' });
      this.isLoading = false;
    },
    goToPasswordLogin() {
      this.$router.push({ name: 'login' });
    },
    // 处理第三方登录
     onThirdLogin() {
       this.$router.push({ name: 'thirdLogin' });
     },
    onRegister() {
      this.$router.push({ name: 'register' });
    }
  }
};
</script>

<style lang="less" scoped>
@bg-color: #f9f9f9;
@primary-color: #007bff;
@secondary-color: #f0f0f0;
@text-color: #333;
@link-color: #007bff;
@border-color: #e0e0e0;
@error-color: #e74c3c;

.verify-code-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: @bg-color;
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.verify-code-login-box {
  width: 350px;
  padding: 30px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  animation: slideIn 1s ease;
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.login-header {
  text-align: center;
  margin-bottom: 25px;
}

.verify-code-login-title {
  font-size: 28px;
  color: @text-color;
  font-weight: bold;
}

.cell-group {
  border: 1px solid @border-color;
  border-radius: 10px;
  padding: 20px;
}

.login-field {
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid @secondary-color;
  padding-bottom: 10px;
  font-size: 16px;
  color: @text-color;
  transition: border-bottom-color 0.3s ease;
}

.login-field:focus {
  border-bottom-color: @primary-color;
}

.verify-code-login-field {
  position: relative;
}

.error-message {
  color: @error-color;
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 15px;
  padding-left: 80px;
  position: relative;
}

.login-button, .submit-button {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 12px;
  font-size: 18px;
  transition: all 0.3s ease;
  background-color: @primary-color;
  color: #fff;
}

.login-button:hover, .submit-button:hover {
  background-color: darken(@primary-color, 10%);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.other-login-options {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.other-login-btn {
  border: none;
  background: transparent;
  color: @link-color;
  text-decoration: underline;
  font-size: 14px;
}

.other-login-btn:hover {
  color: darken(@link-color, 10%);
}

.goto {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: @text-color;
}

.register-link {
  color: @link-color;
  text-decoration: underline;
  transition: all 0.3s ease;
  border: none;
  font-size: 14px;
}

.register-link:hover {
  color: darken(@link-color, 10%);
}

.forgot-password-btn, .send-code-btn {
  color: @link-color;
  font-size: 12px;
  padding: 0;
  border: none;
  text-decoration: underline;
}

.forgot-password-btn:hover, .send-code-btn:hover {
  color: darken(@link-color, 10%);
}
</style>